<template>
  <el-dialog
    v-model="dialogFormVisible"
    :before-close="closeDialog"
    :close-on-click-modal="closeOnClickModal"
    :title="dialogTitle"
    :width="`${dialogWidth}px`"
    class="custom-dialog"
  >
    <el-form
      ref="dialogFormRef"
      :model="formData"
      :rules="dialogRules"
      label-position="right"
      label-width="80px"
      class="margin-top-sm padding-lr-sm"
    >
      <!-- <el-form-item label="Id" prop="id">
        <el-input v-model="formData.id" placeholder="请输入Id" clearable></el-input>
      </el-form-item> -->

      <el-form-item label="标题" prop="title">
        <el-input
          v-model="formData.title"
          placeholder="请输入标题"
          type="textarea"
          maxlength="30"
          show-word-limit
          clearable
        ></el-input>
      </el-form-item>
      <!-- {{ isEdit }} -->
      <!-- <el-form-item label="类型" prop="type">
        <el-input v-model="formData.type" placeholder="请输入类型" clearable></el-input>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
  import { computed, nextTick, reactive, ref, watch } from 'vue';
  import { ElMessage } from 'element-plus';

  import {
    postHandbookRecordAdd as addData,
    postUpdate as updateData,
  } from '@/api/handbookRecord/index';
  const props = defineProps({
    options: {
      type: Object,
      required: true,
      default: () => {
        return {
          width: 0,
          title: '',
          modal: false,
          visible: false,
          editStatus: false,
          defaultValue: {},
          cancelText: '取消',
          confirmText: '确定',
        };
      },
    },
  });

  const emit = defineEmits(['confirm', 'close']);

  let formData = ref(props.options.defaultValue);
  const isEdit = computed(() => {
    return props.options.editStatus;
  });

  const dialogTitle = computed(() => {
    return props.options.title;
  });

  const dialogWidth = computed(() => {
    return props.options.width;
  });

  const closeOnClickModal = computed(() => {
    return props.options.modal;
  });

  // 组件ref
  const dialogFormRef = ref();
  const dialogRules = {
    title: [{ required: true, message: '请填写标题', trigger: 'blur' }],
    type: [{ required: true, message: '请填写类型', trigger: 'blur' }],
  };

  function submitForm() {
    dialogFormRef.value
      .validate()
      .then(async () => {
        try {
          let result = isEdit.value
            ? await updateData(formData.value)
            : await addData(formData.value);

          if (result.code === 200) {
            ElMessage({
              message: `${isEdit.value ? '编辑' : '新建'}成功`,
              type: 'success',
            });
            emit('confirm');
          }
        } catch (error) {
          console.log('error', error);
        }
      })
      .catch((error) => {
        console.log('error', error);
        ElMessage({
          message: '参数验证错误，请仔细填写表单数据!',
          type: 'error',
        });
      });
  }
  function rest() {
    formData.value = {};
    isEdit.value = false;
  }
  const dialogFormVisible = ref(props.options.visible);

  function showDialog() {
    dialogFormVisible.value = true;
    nextTick(() => {
      dialogFormRef.value.resetFields();
    });
  }
  function closeDialog() {
    rest();
    emit('close');
  }
  watch(
    () => props.options.visible,
    (val) => {
      dialogFormVisible.value = val;
    },
  );
  watch(
    () => props.options.defaultValue,
    (val) => {
      formData.value = val;
    },
  );
</script>

<style lang="scss" scoped></style>
